<!-- 信息中心概览页面 -->
<template>
  <section id="main-wrapper" class="theme-default">
   <aside class="sidebar sidebar-left" >
        <div class="sidebarDiv">
            <i class="iconfont icon-trendingup"></i>
            <span class="departmentSpanSimple">Campus<span class="uniqueLogo">Care</span></span>
        </div>
        <div class="departmentName">
            <div class="avatar">
                <img src="https://avatars3.githubusercontent.com/u/8786120?v=3&s=40">
                 <span>信息中心<br/>abvdsfg</span>
            </div>  
        </div>
        <nav>
            <ul class="nav nav-pills nav-stacked">
                <li>
                    <a @click="loadview()" v-link="{ path: '/app/infomationCenter/infomationCenterOverView'}" class="nav-header collapsed">
                        <i class="iconfont icon-yingyong"></i>
                        概览
                    </a>
                </li>
                <li>
                    <a @click="loadview()" v-link="{ path: '/app/infomationCenter/infoApplication'}" class="nav-header collapsed">
                    <i class="iconfont icon-formatlistbulleted"></i>
                    校内应用</a>
                </li>
                <li>
                    <a @click="loadview()" v-link="{ path: '/app/infomationCenter/schoolProcess'}" class="nav-header collapsed">
                    <i class="iconfont icon-formatlistbulleted"></i>
                    校内流程</a>
                </li>
            </ul>
        </nav>
    </aside>
    <section class="main-content-wrapper row">
        <router-view></router-view>
        <footer class="">版权信息：@2016江苏金智教育信息股份有限公司</footer>
    </section>
    </section>
    
</template>
<style src="../../assets/css/main.css"></style>
<script>
import { changeKind,changeMsg } from '../../vuex/action'
export default {
  vuex:{
    getters: {
      kind(state) {
        return state.kind
      },
      msg(state){
        return state.msg
      }
    },
    actions: {
      changeKind: changeKind,
      changeMsg:changeMsg
    }
  },
  methods: {
    loadview: function() {
      this.changeKind('all');
      this.changeMsg("1");
    }
  }
}
</script>
<style scoped>
.theme-default .sidebar-left {
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/  
    background:#2ACDCF; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(left, #769ADC, #2ACDCF);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#769ADC), to(#2ACDCF));  
    background:-o-linear-gradient(left, #769ADC, #2ACDCF);
    color: #fff;
}
div.sidebarDiv {
    height: 70px;
}
div.sidebarDiv i{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 24px;
    font-size: 24px;
}
span.departmentSpanSimple {
    display: block;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}
span.uniqueLogo {
    color: #33E8E9;
}
div.departmentName {
    height: 60px;
    margin-left: 24px;
}
footer{
    text-align: center;
    margin-bottom: 24px;
    color: #bbbbbb;
    margin-top: 16px;
}

.departmentName img,
.departmentName span{
    float: left;
}
.departmentName span{
    margin-left: 8px;
    color: #fff;
}
/*div.departmentName span {
    display: block;
    height: 70px;
}*/
.nav-stacked{
    color: #fff;
}
.nav-list>li>a{
   padding:10px 42px;
}
.nav-stacked .nav-header:hover{
     border-left: 4px solid #93D36E;
}
.sidebar .nav .v-link-active{
  border-left: 4px solid #93D36E;
  background-color:#68B8F7;
}
.sidebar .nav a{
    border-left: 4px solid transparent;
    font-weight: normal;
}
.sidebar .nav .nav-list a{
    padding-left: 60px;
}
.nav .nav-header{
    padding-left: 24px;
    font-size: 14px;
    
}
</style>